<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加用户</title>
    <link rel="stylesheet" href="/gzht/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/gzht/lib/Hui-iconfont/1.0.8/iconfont.min.css" media="all">
    <link rel="stylesheet" href="/gzht/lib/layui/formselects/formSelects-v4.css">
    <style type="text/css">
        .dep_bg_red {
            background-color: rgba(200, 200, 200, 0.6);
        }
    </style>
</head>
<body style="background-color: #F2F2F2;">
<blockquote class="layui-elem-quote">基本信息</blockquote>
<hr>
<div style="width: 100%;display: flex;justify-content: center;">
    <form class="layui-form" id="addAdminForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color: #FF5722;">*</span>用户名称：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" name="adminName" lay-verify="adminName" autocomplete="off" placeholder="用户名称"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color: #FF5722;">*</span>归属部门：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <%--提交值--%>
                    <input id="submitDep" type="hidden" name="adminPartNo" lay-verify="adminPartNo" readonly placeholder="暂无归属"
                           class="layui-input">
                    <%--显示值--%>
                    <input id="showPart" readonly type="text" placeholder="暂无归属" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color: #FF5722;">*</span>手机号码：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" name="adminPhone" lay-verify="adminPhone" placeholder="手机号码" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color: #FF5722;">*</span>邮箱：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" name="adminEmail" lay-verify="adminEmail" class="layui-input" placeholder="邮箱">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color: #FF5722;">*</span>登录账号：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" name="adminLoginName" lay-verify="adminLoginName" placeholder="登录账号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color: #FF5722;">*</span>登录密码：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="password" name="adminPwd" lay-verify="adminPwd" placeholder="登录密码" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="radio" name="adminSex" value="male" title="男" checked>
                    <input type="radio" name="adminSex" value="female" title="女">
                    <input type="radio" name="adminSex" value="unknow" title="未知">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户状态：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="checkbox" value="0" name="adminStatus" checked lay-skin="switch" lay-text="">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">岗位：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <select name="postNo" id="postNo" lay-filter="postNo"
                            xm-select="postNo" xm-select-type="1">
                        <option value=""></option>
                        <c:forEach items="${postList}" var="post">
                            <option value="${post.postNo}">${post.postName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <c:forEach items="${roles}" var="role">
                        <input type="checkbox" value="${role.roleNo}" name="roleNo" title="${role.roleName}">
                    </c:forEach>
                </div>
            </div>
        </div>
        <button style="display: none;" class="layui-btn" lay-submit="" lay-filter="addAdminFormSubmit" id="formSubmit">立即提交</button>
    </form>
</div>
<blockquote class="layui-elem-quote">其他信息</blockquote>
<hr>
<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">备注:</label>
    <div class="layui-input-block">
        <textarea placeholder="请输入内容" name="adminRemark" id="adminRemark" class="layui-textarea"></textarea>
    </div>
</div>
<div style="width: 100%;display: flex;justify-content: center;">
    <button type="button" class="layui-btn layui-btn-normal" id="submit"><i class="layui-icon">&#xe605;</i>保存
    </button>
    <a type="button" class="layui-btn layui-btn-warm" href="javascript:window.history.back();"><i
            class="layui-icon">&#xe65c;</i>关闭</a>
</div>
<%--部门选择--%>
<div style="display: none;" id="part">

</div>
<script src="/gzht/statics/js/jquery-1.12.2.min.js"></script>
<script src="/gzht/lib/layui/layui.js"></script>
<script src="/gzht/lib/layui/formselects/formSelects-v4.js"></script>
<script src="/gzht/statics/utils/TreeUtil.js"></script>
<script>
    layui.use(['table', 'tree', 'form'], function () {
        var table = layui.table,
            form = layui.form,
            tree = layui.tree;

        form.render();
        /*表单验证*/
        form.verify({
            adminName: function (value, item) {
                if(value.trim() == ''){
                    return '用户名称不得为空'
                }
                if(!/^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$/.test(value)){
                    return '用户名不能包含特殊字符'
                }
            }
            , adminPwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
            , adminPartNo: function (value, item) {
                if(value.trim() == ''){
                    return '必须选择一个机构'
                }
            }
            , adminEmail: [/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, '邮箱格式不正确']
            , adminPhone: [/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, '请正确输入11位手机号']
            , adminLoginName: function (value, item) {
                if(!/^\w+$/.test(value)){
                    return '登录账号只能由英文字母、下划线和数字构成'
                }
                var exist = false;
                $.ajax({
                    url: '/gzht/api/validLoginName',
                    data: {
                        loginName: value
                    },
                    type: 'post',
                    async: false,
                    success: function (res) {
                        if(res.code == 1002){
                            exist = true;
                        }
                    }
                })
                if(exist)
                return '此账号已存在'
            }
    });
        /*表单提交*/
        $('#submit').click(function () {
            $("#formSubmit").trigger("click");
        })
        //监听提交
        form.on('submit(addAdminFormSubmit)', function(data){
            var formData = new FormData($('#addAdminForm')[0]);
            // 获取备注信息
            var remark = $('#adminRemark').val();
            formData.append("adminRemark", remark);
            $.ajax({
                url: '/gzht/api/addAdmin',
                data: formData,
                type: 'post',
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (res) {
                    if(res.code == 1001){
                        layer.msg("添加成功",{
                            icon: 1,
                            time: 1000
                        }, function(){
                            window.history.back();
                        });
                    }else {
                        layer.msg('添加失败')
                    }
                },
                fail: function (err) {
                    layer.msg("网络出错")
                }
            })
            return false;
        });

        /*请求获取部门列表*/
        $.ajax({
            url: '/gzht/department/getAll',
            success: function (res) {
                var deps = res || [];
                var data = deps.map(function (item) {
                    return {
                        title: item.departmentName,
                        id: item.departmentNo,
                        pid: item.departmentParentNo,
                        disabled: item.departmentStatus == 1 ? true : false
                    }
                });
                var depTree = trans_tree(data);
                tree.render({
                    elem: '#part' //默认是点击节点可进行收缩
                    , data: depTree,
                    click: function (obj) {
                        if (!obj.data.children) {
                            $('.layui-tree-txt').removeClass('dep_bg_red')
                            $(obj.elem).find('.layui-tree-txt').addClass('dep_bg_red')
                            $.addAdminSelectDep = obj.data
                        }
                    }
                });
            },
            fail: function () {
                layer.msg("网络出错")
            }
        })

        /*监听部门选择*/
        $('#showPart').click(function () {
            layer.open({
                type: 1,
                area: ['300px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content: $('#part'),
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    // 确定
                    $('#showPart').val($.addAdminSelectDep.title);
                    $('#submitDep').val($.addAdminSelectDep.id);
                    layer.close(index)
                },
                btn2: function (index, layero) {
                    // 取消
                }
            });
        })
    })
</script>
</body>
</html>
